<template>
  <AppPage fullViewport>
    <ListPage
      ref="listPage"
      :list="searchFormList"
      :api="getListApi.unpack"
      rowKey="id"
      :columns="tableColumns"
      showOperation
    >
      <template #operation>
        <ElButton type="primary" @click="onAdd">新增</ElButton>
      </template>
      <template #table-OPERATE="{ row }">
        <ElButton type="primary" link @click="onEdit(row)">编辑</ElButton>
        <ElButton
          type="primary"
          link
          @click="onDel(row, () => listPage?.reload())"
          >删除</ElButton
        >
      </template>
    </ListPage>
    <DetailModal
      v-model:show="detailModalCtrl.show"
      :list="detailFormList"
      :data="detailModalCtrl.data"
      :type="detailModalCtrl.type"
      :add-api="addApi"
      :edit-api="editApi"
      @after-add="listPage?.reload()"
      @after-edit="listPage?.refresh()"
    />
    <TriggerAutoImport>
      <ElInput />
      <ElInputNumber />
    </TriggerAutoImport>
  </AppPage>
</template>
<script lang="ts" setup>
import DetailModal from "@/components/modal/DetailModal.vue";
import {
  searchFormList,
  tableColumns,
  detailFormList,
  addApi,
  editApi,
  getListApi,
  useCurd,
} from "./config";
import type { ListPageInstance } from "@/components/list-page";

const listPage = ref<ListPageInstance>();

const { detailModalCtrl, onAdd, onEdit, onDel } = useCurd();
</script>
